function ZoomScope (options = {}){
    this.box = options.box || document.querySelector('.box');
    this.show = this.box.querySelector('.show');
    this.showInfo = {
        width:this.show.offsetWidth,
        height:this.show.offsetHeight
    }
    this.cover = this.show.querySelector('.cover');
    this.coverInfo = {
        width:inWidth(this.cover),
        height:inHeight(this.cover)
    }
    this.display = this.box.querySelector('.display');
    this.bigImg = this.display.querySelector('img');
    this.bigImgInfo = {
        width:inWidth(this.bigImg),
        height:inHeight(this.bigImg)
    }
    this.resetDisplay();
}

ZoomScope.prototype.resetDisplay = function(){
    /*
        小图/大图 = cover/display

        => display = cover * 大图 / 小图
    */
    const _width = this.coverInfo.width * this.bigImgInfo.width / this.showInfo.width;
    const _height = this.coverInfo.height * this.bigImgInfo.height / this.showInfo.height;
    this.display.style.width = _width +'px';
    this.display.style.height = _height + 'px';
    this.bindEvent();
}

ZoomScope.prototype.bindEvent = function(){
    this.show.addEventListener('mouseenter',() => {
        css(this.cover,'display','block');
        css(this.display,'display','block')
    })
    this.show.addEventListener('mousemove',e => {
        let _left = e.pageX - this.box.offsetLeft - this.coverInfo.width/2;
        let _top = e.pageY - this.box.offsetTop - this.coverInfo.height/2;
        if(_left <= 0){
            _left = 0;
        }else if(_left >= this.showInfo.width - this.coverInfo.width){
            _left = this.showInfo.width - this.coverInfo.width
        }
        if(_top <= 0){
            _top = 0;
        }else if(_top >= this.showInfo.height - this.coverInfo.height){
            _top = this.showInfo.height - this.coverInfo.height
        }        
        css(this.cover,'left', _left + 'px');
        css(this.cover,'top', _top + 'px');

        /*大图移动的距离
            cover移动的距离/大图移动的距离 = 小图/大图
        */
        let _x = _left * this.bigImgInfo.width/this.showInfo.width;
        let _y = _top * this.bigImgInfo.height/this.showInfo.height;
        css(this.bigImg,'left', -_x + 'px');
        css(this.bigImg,'top',-_y + 'px');

    })
    this.show.addEventListener('mouseleave',() => {
        css(this.cover,'display','none');
        css(this.display,'display','none')
    })
}

